<template>
	<div>
		<h3 style="margin-bottom:20px;">以下是医院被投诉的资料</h3>
		<el-table :data="tableData" border style="width:100%;">
			<el-table-column fixed label="投诉日期" prop="date" width="150"></el-table-column>
			<el-table-column label="投诉人电话
" prop="phone" width="150"></el-table-column>
			<el-table-column label="投诉人姓名" prop="name" width="120"></el-table-column>
			<el-table-column label="投诉内容" prop="content" width="350"></el-table-column>
			<el-table-column label="涉及科室/人员
" prop="department" width="150"></el-table-column>
			<el-table-column label="投诉方式" prop="way" width="100"></el-table-column>
			<el-table-column label="处理进度" prop="processingStatus" width="200"></el-table-column>
			<el-table-column label="最终处理结果" fixed="right" prop="results" width="250">
				<template slot-scope="scope">
					<div>
						<!-- 当登录用户不是 user 且最终处理结果为空时，显示回复输入框 -->
						<el-button v-if="easeHis !== 'user' && !scope.row.results" placeholder="回复"
							v-model="scope.row.reply" @click="edictDoctor(scope.$index)">回复</el-button>
						<!-- 显示最终处理结果 -->
						<div v-else>{{ scope.row.results }}</div>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog title="回复" :visible.sync="dialogVisible" size="tiny">
			<el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="textarea"></el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script type="text/ecmascript-6">
	import Vue from 'vue';
	import {
		mapGetters
	} from 'vuex';
	import {
		api
	} from '../../../global/api.js';
	export default {
		data() {
			return {
				tableData: [],
				dialogVisible: false,
				Index: '',
				textarea: ''
			};
		},
		computed: {
			...mapGetters([
				'easeHis' // 假设 easeHis 是存储登录用户名的 getter
			])
		},
		created() {
			let that = this;
			let complaints = "http://localhost:8088/AllCopts";
			Vue.http.get(complaints).then(function(response) {
				that.tableData = response.body.data.AllCopts.map(item => {
					// 格式化 date 字段
					item.date = new Date(item.date).toISOString().split('T')[0];
					return item;
				});
			}, function(response) {
				alert('请求失败了');
			});
		},
		methods: {
			edictDoctor(index) {
				let that = this;
				that.Index = index; // 存放当前行的序号
				this.dialogVisible = true;
			},
			submit() {
				let that = this;
				that.tableData[that.Index].results = this.textarea;
				//回复投诉信息
				let API = "http://localhost:8088/updateCopts";
				that.$http.post(API, that.tableData[that.Index]).then(function() {
					that.dialogVisible = false;

					this.$message({
						message: '已回复',
						type: 'success'
					});
				}, function() {
					this.$message.error('回复失败');
				});
			}
		}
	};
</script>